<template>
    <div class="tableList">
        <vxe-table show-overflow max-height="500" ref="xTable" :tree-config="{transform: true}" :scroll-y="{gt: 20}"
            :data="tableData" :header-cell-style="{color:'#000',fontWeight:400,fontSize:'12px'}"
            :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}" border v-loading="loading"
            element-loading-text="加载中" element-loading-background="rgba(250, 250, 250, 0.5)"
            element-loading-spinner="el-icon-loading">
            <vxe-column type="seq" width="200" tree-node title="序号"></vxe-column>
            <vxe-column field="label" title="名称"></vxe-column>
            <vxe-column field="remark" title="备注"></vxe-column>
            <vxe-column field="sort" title="排序"></vxe-column>
            <vxe-column title="操作" width="160">
                <template #default="{ row }">
                    <el-button type="text" size="small" @click="handleEvent('addChild',row.id)">添加子级
                    </el-button>
                    <el-button type="text" size="small" @click="handleEvent('edit',row)" style="margin-right:10px">编辑
                    </el-button>
                    <el-popconfirm title="确认删除？" @confirm="getTreeDel(row.id)">
                        <el-button slot="reference" type="text" size="mini">删除</el-button>
                    </el-popconfirm>
                </template>
            </vxe-column>
            <template #empty>
                <img src="@/assets/login/empty.png" style="width:100px;margin-top:10px">
                <div style="color:#909399;line-height:60px;font-size:14px">暂无数据</div>
            </template>
        </vxe-table>
    </div>
</template>

<script>
    import {
        treeList,
        treeDel
    } from '@/api/treeController'
    export default {
        data() {
            return {
                tableData: [],
                loading: false,
            }
        },
        props: {
            searchForm: {
                type: Object,
                default: () => ({})
            }
        },
        mounted() {
            this.getTreeList(this.searchForm)
        },
        methods: {
            //树列表
            getTreeList(data) {
                this.loading = true
                treeList(data).then(res => {
                    if (res.code == 200) {
                        this.tableData = res.data
                    }
                    this.loading = false
                })
            },
            //删除
            getTreeDel(id) {
                treeDel({
                    id
                }).then(res => {
                    if (res.code == 200) {
                        this.getTreeList(this.searchForm)
                    }
                })
            },
            handleEvent(type, row) {
                this.$emit('handle', {
                    type,
                    row
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .tableList {
        code {
            font-family: sans-serif;
        }
    }
</style>